<template>
	<div class="home">
		<div class="list-box">
			<div class="pannel-title pannel-between">
				<div>最新技术文章</div>
			</div>
			<div class="line"></div>
			<div class="data-table">
				<a-table :columns="articleColumns" :row-key="(record) => record.id" :data-source="techArticleList" :pagination="false" :loading="techLoading">
					<template #isHide="{ record }">
						<a-tag v-if="record.is_del === 'Y'" color="error"><template #icon><close-circle-outlined /></template>已删除</a-tag>
						<a-tag v-else-if="record.is_hide === 'Y'" color="#cccccc">隐藏</a-tag>
						<a-tag v-else-if="record.is_hide === 'N'" color="#2db7f5">显示</a-tag>
					</template>
				</a-table>
			</div>
		</div>
		<div class="list-box">
			<div class="pannel-title pannel-between">
				<div>最新漏洞文章</div>
			</div>
			<div class="line"></div>
			<div class="data-table">
				<a-table :columns="articleColumns" :row-key="(record) => record.id" :data-source="bugArticleList" :pagination="false" :loading="bugLoading">
					<template #isHide="{ record }">
						<a-tag v-if="record.is_del === 'Y'" color="error"><template #icon><close-circle-outlined /></template>已删除</a-tag>
						<a-tag v-else-if="record.is_hide === 'Y'" color="#cccccc">隐藏</a-tag>
						<a-tag v-else-if="record.is_hide === 'N'" color="#2db7f5">显示</a-tag>
					</template>
				</a-table>
			</div>
		</div>
		<div class="list-box">
			<div class="pannel-title pannel-between">
				<div>最新评论</div>
			</div>
			<div class="line"></div>
			<div class="data-table">
				<a-table :columns="commentColumns" :row-key="(record) => record.id" :data-source="commentList" :pagination="false" :loading="commentLoading">
				</a-table>
			</div>
		</div>
		<div class="list-box">
			<div class="pannel-title pannel-between">
				<div>最新设备密码</div>
			</div>
			<div class="line"></div>
			<div class="data-table">
				<a-table
                :columns="deviceColumns"
                :row-key="(record) => record.id"
                :data-source="deviceList"
                :pagination="false"
                :loading="deviceLoading"
            >
				<template #username="{record}">
					{{record.username}}/{{record.password}}
				</template>
            </a-table>
			</div>
		</div>
		<div class="list-box">
			<div class="pannel-title pannel-between">
				<div>最新在线工具</div>
			</div>
			<div class="line"></div>
			<div class="data-table">
				<a-table
                :columns="toolColumns"
                :row-key="(record) => record.id"
                :data-source="toolList"
                :pagination="false"
                :loading="toolLoading"
            >
				<template #logo="{text}">
					<img v-if="text" :src="text" style="width:40px;height:40px;display:block;" />
				</template>
            </a-table>
			</div>
		</div>
		<div class="list-box">
			<div class="pannel-title pannel-between">
				<div>最新资源链接</div>
			</div>
			<div class="line"></div>
			<div class="data-table">
				<a-table
                :columns="resourceColumns"
                :row-key="(record) => record.id"
                :data-source="resourceList"
                :pagination="false"
                :loading="resourceLoading"
            >
				<template #logo="{text}">
					<img v-if="text" :src="text" style="width:40px;height:40px;display:block;" />
				</template>
            </a-table>
			</div>
		</div>
	</div>
</template>
<script>
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { Table, Tag } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
import { CloseCircleOutlined } from "@ant-design/icons-vue";
export default {
	components: {
		ATable: Table,
		ATag:Tag,
		CloseCircleOutlined
	},
	setup() {
		const store = useStore();
		//text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
		store.dispatch("setBreadcrumb", {
			text: "首页",
			isBack: false,
		});
		const articleColumns = reactive([
			{
				title: "文章标题",
				dataIndex: "title",
				key: "title",
			},
			{
				title: "作者",
				dataIndex: "author",
				key: "author",
			},
			{
				title: "排序序号",
				width:"100px",
				dataIndex: "display_priority",
				key: "display_priority",
			},
			{
				title: "状态",
				dataIndex: "is_hide",
				key: "is_hide",
				align:"center",
				slots: { customRender: "isHide" },
			},
		]);
		const commentColumns = reactive([
			{
				title: "评论文章",
				dataIndex: "title",
				key: "title",
			},
			{
				title: "评论人",
				dataIndex: "author",
				key: "author",
			},
			{
				title: "评论内容",
				dataIndex: "is_hide",
				key: "is_hide",
			},
			{
				title: "评论时间",
				dataIndex: "display_priority",
				key: "display_priority",
			},
		]);
		const toolColumns = reactive([
            {
                title: "在线工具名称",
                dataIndex: "name",
                key: "name",
            },
            {
                title: "logo",
                dataIndex: "logo",
                key: "logo",
				slots: { customRender: "logo" },
            },
            {
				title: "下载地址",
                dataIndex: "url",
                key: "url",
            },
			{
				title: "简介",
				dataIndex: "desc",
				key: "desc",
			},
			{
				title: "排序序号",
				dataIndex: "display_priority",
				key: "display_priority",
			},
        ]);
		const resourceColumns = reactive([
            {
                title: "资源连接名称",
                dataIndex: "name",
                key: "name",
            },
            {
                title: "logo",
                dataIndex: "logo",
                key: "logo",
				slots: { customRender: "logo" },
            },
            {
				title: "下载地址",
                dataIndex: "url",
                key: "url",
            },
			{
				title: "简介",
				dataIndex: "desc",
				key: "desc",
			},
			{
				title: "排序序号",
				dataIndex: "display_priority",
				key: "display_priority",
			},
        ]);
		const deviceColumns = reactive([
            {
                title: "品牌中文",
                dataIndex: "name_cn",
                key: "name_cn",
            },
            {
                title: "品牌英文",
                dataIndex: "name_en",
                key: "name_en",
            },
            {
                title: "型号",
                dataIndex: "model",
                key: "model",
            },
			{
				title: "用户名/密码",
				dataIndex: "username",
				key: "username",
				slots:{customRender:'username'}
			},
            {
				title: "管理地址",
                dataIndex: "url",
                key: "url",
            },
        ]);
		/**
		 * tree
		 */
		return {
			techArticleList:ref([]),
			techLoading: ref(false),
			bugArticleList:ref([]),
			bugLoading: ref(false),
			articleColumns,
			commentList:ref([]),
			commentLoading: ref(false),
			commentColumns,
			toolList:ref([]),
			toolLoading: ref(false),
			toolColumns,
			resourceList:ref([]),
			resourceLoading: ref(false),
			resourceColumns,
			deviceList:ref([]),
			deviceLoading: ref(false),
			deviceColumns,
		};
	},
	mounted() {
		this.getTechList();
		this.getBugList();
		this.getToolList();
		this.getResourceList();
		this.getDeviceList();
	},
	updated() {
		if (this.$route.query.type) {
			this.active = this.$route.query.type;
		}
	},
	methods: {
		getTechList() {
			this.techLoading = true;
			httpRequest
				.post("获取技术文章列表", {keywords: "", cateId1: 0, cateId2: 0, status: "", page: 1, pageSize: 10})
				.then((res) => {
					this.techArticleList = res.data.data;
				})
				.finally(() => {
					this.techLoading = false;
				});
		},
		getBugList() {
			this.techLoading = true;
			httpRequest
				.post("获取漏洞文章列表", {keywords: "", cateId1: 0, cateId2: 0, status: "", page: 1, pageSize: 10})
				.then((res) => {
					this.bugArticleList = res.data.data;
				})
				.finally(() => {
					this.bugLoading = false;
				});
		},
		getToolList() {
            this.toolLoading = true;
            httpRequest
                .post("获取在线工具列表", { page: 1 ,pageSize:5})
                .then((res) => {
                    this.toolList = res.data.data;
                })
                .finally(() => {
                    this.toolLoading = false;
                });
        },
		getResourceList() {
            this.resourceLoading = true;
            httpRequest
                .post("获取资源连接列表", { page: 1 ,pageSize:5})
                .then((res) => {
                    this.resourceList = res.data.data;
                })
                .finally(() => {
                    this.resourceLoading = false;
                });
        },
		getDeviceList() {
            this.deviceLoading = true;
            httpRequest
                .post("获取设备密码列表", { page: 1 ,pageSize:10})
                .then((res) => {
                    this.deviceList = res.data.data;
                })
                .finally(() => {
                    this.deviceLoading = false;
                });
        },
	},
};
</script>
<style lang="less" scoped>
.line {
	width: 100%;
	margin: 20px 0;
	border-top: 1px solid #eee;
}
.home{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	.list-box{
		width: calc(50% - 10px);
		margin-bottom: 20px;
	}
}
</style>
